{% extends "base.html" %} {% block head %} {{ super() }}



<script
	src="{{url_for('static', filename='../static/js/zmultipages.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/ztable.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/zform.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/Wizard.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function() {
		/*
		function load_category($category){
			//Set value to submit form
			
			name = $category.find('td[name="name"]').text()
			$('#category-name').val(name);
			
			description = $category.find('td[name="description"]').text();
			$('#category-description').val(description);
			
			id = $category.find('input[name="selected"]').val()
			$('#category-id').val(id);
			$('#category-action').val('edit');
		}
		
		//table = $('#categories-table').ZTable({load_callback:load_category});
		*/
		var wizard = new Wizard({form_id:'booking-form',
			height:300,
			validationUrl:"/"
			});
		
		wizard.hide();
		
		//$('#ticket-list-warning').text('You have no ticket yet, click Pre-order button to book ticket.')

	});
</script>
{% endblock %} 

{% block content %}
	
<div class="container">
	<div id="ticket-list-warning"></div>
	
	{% if tickets != None %}
	<div id="ticket-list" class="panel panel-default col-md-12">
		<form id="ticket-list-form" action="/delete_items"
			method="post">
			<div class="panel-body">
				<div class="col-md-6">
					<h3>Manage Tickets</h3>
				</div>
				<div class="panel-btn-area col-md-6" style="padding-top: 18px;">
					<input id="category-add-btn" type="button"
						class="btn btn-primary col-md-3" name="add-category" value="Add" />
					<input id="category-edit-btn" type="button"
						class="btn btn-primary col-md-3 col-md-offset-1"
						name="edit-category" value="Edit" />
					<button id="category-del-btn" type="submit"
						class="submit btn btn-primary col-md-3 col-md-offset-1"
						name="delete-category">Delete</button>
				</div>

				<div>

					<table id="categories-table" class="table" mode="normal"
						style="height: 200px; overflow: auto;">
						<thead>
							<tr>
								<td><input type="checkbox"></td>
								<th>Serial NO.</th>
								<th>Type</th>
								<th>Status</th>
								<th>User</th>
								<th>Email</th>
							</tr>
						</thead>
						<tbody>
							
								{% for ticket in tickets %}
							<tr>
								<td><input type="checkbox" name="selected" value="{{ ticket.id }}"></td>
								<td name="id">{{ticket.id}}</td>
								<td name="type">{{ticket.type}}</td>
								<td name="status">{{ticket.status}}</td>
								<td name="user">{{ticket.user}}</td>
								<td name="email">{{ticket.email}}</td>
							</tr>
								{% endfor %} 
							
						</tbody>
					</table>
				</div>
				<br />
				<p>Rows 1-10 of 48</p>
			</div>

		</form>
	</div> <!-- end of #ticket-list -->
	{% endif %}
	
	<form id="booking-form" enctype="multipart/form-data" action="/manage_tickets" method="post">
		<div class="z-page" value="0">
			<h3>Step 2: Book SpringGala ticket</h3>
			<div>*Please do not leave your credit card information in the message, we will contact you through email or phone.</div>
			<!-- Ticket -->
			<div class="row form-group" name="n-adult-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Adults, $25 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-senior-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Senior (65+), $5 each</div>
			</div>
			
			<!-- Ticket -->
			<div class="row form-group" name="n-child-tickets">
				<div class="col-md-3">
					<select class="form-control z-input">
						<option value="1">0</option>
						<option value="1">1</option>
						<option value="1">2</option>
					</select>
				</div>
				<div class="col-md-3 z-label">Number of Senior (4-14), $10 each</div>
			</div>
			
			
			<!-- Message -->
			<div class="row form-group" name="message" >
				<div class="col-md-3">
					<textarea class="form-control z-input" rows="5"
						placeholder="Messages"></textarea>
				</div>
	
				<div class="col-md-4 z-label">Special needs can be left here.</div>
			</div>
	
		</div><!-- end of page 1 -->
		
		
		<div class="row col-md-12">
			<div class="col-md-7 z-btn-area pull-left">
				<button type="submit"
					class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
			</div>
			<div class="col-md-5"></div>
		</div>
	</form>
	
	
{% endblock %}